<template>
  <fks-dialog
    :title="title"
    :visible.sync="dialogVisible"
    :show-fullscreen="true"
    width="1100px"
    @close="close"
  >
    <div class="preview_content">
      <div class="preview_empty" v-if="!fileToken">
        <fks-empty description="未提供fileToken"></fks-empty>
      </div>
      <div class="file_area">
        <component
          :is="currentComponent"
          :key="currentComponent"
          :fileToken="fileToken"
        ></component>
      </div>
    </div>
    <fks-button class="previewBtn" type="primary" @click="close">
      关闭预览
    </fks-button>
  </fks-dialog>
</template>

<script>
import { getFile } from "@/api/file";
const imgPreview = () => import("./components/img.vue");
const pdfPreview = () => import("./components/pdf.vue");
const docxPreview = () => import("./components/docx.vue");
const dxfPreview = () => import("./components/dxf/index.vue");
export default {
  //import引入组件才能使用
  components: { imgPreview, pdfPreview, docxPreview, dxfPreview },
  props: {
    fileToken: {
      type: String,
      default: "2243593e8c99b4e0ae1cd92dfec81859",
    },
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      dialogVisible: this.visible,
      title: "预览",
      currentComponent: "",
      imgTyps: ["jpg", "png", "jpeg", "gif", "bmp", "webp"],
      filetypeMaps: {
        pdf: "pdfPreview",
        docx: "docxPreview",
        dxf: "dxfPreview",
      },
    };
  },
  // 计算属性
  computed: {},
  // 监听data中的数据变化
  watch: {
    dialogVisible: {
      deep: true,
      handler(val) {
        this.$emit("update:visible", val);
      },
    },
    visible(val) {
      this.dialogVisible = val;
    },
  },
  // 方法集合
  methods: {
    getFileInfo(token) {
      getFile({ f8s: [token] }).then((res) => {
        if (res.status) {
          const fileType = res.data[0].extName.toLowerCase();
          this.handleFileType(fileType);
        }
      });
    },
    handleFileType(type) {
      console.log(type);
      const fileType = this.filetypeMaps[type];
      if (fileType) {
        this.currentComponent = fileType;
      } else {
        if (this.imgTyps.includes(type)) {
          this.currentComponent = "imgPreview";
        }
      }
      // console.log("fileType", fileType);
      // if (this.imgTyps.includes(type)) {
      //   this.currentComponent = "imgPreview";
      // } else if (type == "pdf") {
      //   this.currentComponent = "pdfPreview";
      // } else if (type == "docx") {
      //   this.currentComponent = "docxPreview";
      // } else if (type == "xmind") {
      //   this.currentComponent = "xmindPreview";
      // }
    },
    /**
     * @description: 关闭预览窗口
     * @return {*}
     */
    close() {
      this.formData = {};
      this.$emit("update:visible", false);
    },
  },
  // 生命周期，创建完成时（可以访问当前this实例）
  created() {
    if (this.fileToken) {
      this.getFileInfo(this.fileToken);
    }
  },
  // 生命周期：挂载完成时（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期：创建之前
  beforeMount() {}, //生命周期：挂载之前
  beforeUpdate() {}, //生命周期：更新之前
  updated() {}, //生命周期：更新之后
  beforeDestroy() {}, //生命周期：销毁之前
  destroyed() {}, //生命周期：销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发执行
};
</script>
<style scoped>
.preview_content {
  width: 100%;
  height: 100%;
  min-height: 500px;
  padding-bottom: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.previewBtn {
  position: absolute;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
}
.file_area {
  width: 100%;
  height: 100%;
  overflow: auto;
}
::v-deep .fks-dialog__body {
  height: calc(100% - 56px);
}
</style>
